<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue学习使用</title>
  <!-- 第1步： 引入vue库文件 -->
  <script src="./js/vue.js"></script>
</head>

<body>

  <!-- 第2步：根容器，js对象转为真实的html后，在放在网页的什么位置中  挂载点 -->
  <!-- 挂载点可以写多个，但是在工作中一般只有一个 -->
  <div id="app">

    <!-- 第4步：使用 -->
    <!-- 模板语法 插值表达式 mustcache模板名称[小胡子语法] -->
    <!-- title它就是在vue实例化配置data属性中的数据 -->
    <h3>{{ title }}</h3>
    <!-- <input type="text" id="setTitle"> -->
    <!-- v-model，语法糖 -->
    <input type="text" v-model="title">

  </div>

  <!-- 第3步：实例化vue -->
  <script>
    const vm = new Vue({
      // vue处理完成数据展示在页面中的挂载点dom
      el: '#app',
      // vue2中，唯一一个地方可以把data写成对象地方，就是在实例化vue类时
      // 声明vue要渲染的数据
      data: {
        title: 'hello vue'
      }
    })

    console.log(vm.title)

    // document.getElementById('setTitle').value = vm.$data.title
    // document.getElementById('setTitle').oninput = e => vm.$data.title = e.target.value.trim()

  </script>

</body>

</html>